<template>
  <div class="map-block">
    <div class="map" id="map"></div>
    <div v-if="tooltip.show" :style="'top:'+tooltip.y+'px;left:'+tooltip.x+'px'" id="tooltip" class="tooltip">
      {{ content}}</div>
  </div>
</template>

<script>
import {getMarkers} from "@/api/map";

export default {
  name: "Map",
  data(){
    return{
      content:'',
      total:'',
      tooltip:{
        show:false,
        x:0,
        y:0
      },
     /* markerData:{
        "敦煌市":'人才总量2020年0.642万人,2021年0.7万人,2021年增长率9.03%，2022年0.8013万人,2022年增长率14.47%；各类人才占人口比例3.87%（2020）,4.22%（2021）,5.42%（2022）；人才发展专项资金2020年200万元,2021年200万元,2021年增长率0%，2022年400万元,2022年增长率100%。党政人才2020年0.1万人,2021年0.11万人,2021年增长率10.00%，2022年0.15万人,2022年增长率36.36%。企业经营管理人才2020年0.11万人,2021年0.13万人,2021年增长率18.18%，2022年0.16万人,2022年增长率23.08%。专业技术人才2020年0.34万人,2021年0.36万人,2021年增长率5.88%，2022年0.3643万人,2022增长率1.19%。高技能人才2020年0.028万人,2021年0.03万人,2021年增长率7.14%，2022年0.04万人,2022年增长率33.33%。农村实用人才2020年0.047万人,2021年0.05万人,2021增长率6.38%，2022年0.06万人,2022年增长率20.00%。社会工作人才2020年0.17万人,2021年0.02万人,2021年增长率17.65%，2022年0.027万人,2022年增长率35%',
        "瓜州县":'人才总量2020年1.2768万人,2021年1.3952万人,2021年增长率9.27%，2022年1.5632万人,2022年增长率12.04%；各类人才占人口比例9.11%（2020）,10.05%（2021）,11.16%（2022）；人才发展专项资金2020年150万元,2021年170万元,2021年增长率13.33%，2022年200万元,2022年增长率17.65%。党政人才2020年0.1706万人,2021年0.2006万人,2021年增长率17.58%，2022年0.2352万人,2022年增长率17.25%。企业经营管理人才2020年0.1097万人,2021年0.1199万人,2021年增长率9.30%，2022年0.1323万人,2022年增长率1034%。专业技术人才2020年0.2853万人,2021年0.3015万人,2021年增长率5.68%，2022年0.3487万人,2022增长率45.66%。高技能人才2020年0.0131万人,2021年0.0144万人,2021年增长率9.92%，2022年0.0164万人,2022年增长率13.89%。农村实用人才2020年0.6856万人,2021年0.7453万人,2021增长率8.71%，2022年0.8159万人,2022年增长率9.47%。社会工作人才2020年0.0125万人,2021年0.0135万人,2021年增长率8.00%，2022年0.0147万人,2022年增长率8.89%',
        "阿克塞县":'人才总量2020年0.2198万人,2021年0.2485万人,2021年增长率13.06%，2022年0.2555万人,2022年增长率2.82%；各类人才占人口比例16.64%（2020）,18.81%（2021）,19.42%（2022）；人才发展专项资金2020年100万元,2021年100万元,2021年增长率0.00%，2022年100万元,2022年增长率0.00%。党政人才2020年0.053万人,2021年0.0622万人,2021年增长率17.36%，2022年0.0636万人,2022年增长率2.25%。企业经营管理人才2020年0.0055万人,2021年0.0067万人,2021年增长率21.82%，2022年0.0067万人,2022年增长率0.00%。专业技术人才2020年0.1003万人,2021年0.1087万人,2021年增长率8.37%，2022年0.1127万人,2022增长率3.68%。高技能人才2020年0.0329万人,2021年0.0357万人,2021年增长率8.51%，2022年0.0364万人,2022年增长率1.94%。农村实用人才2020年0.0187万人,2021年0.0220万人,2021增长率17.65%，2022年0.0223万人,2022年增长率1.36%。社会工作人才2020年0.0094万人,2021年0.0132万人,2021年增长率40.43%，2022年0.0138万人,2022年增长率4.55%',
        "玉门市":'人才总量2020年1.68万人,2021年1.77万人,2021年增长率5.36%，2022年1.8228万人,2022年增长率2.98%；各类人才占人口比例9.05%（2020）,10.88%（2021）,10.88%（2022）；人才发展专项资金2020年25万元,2021年25万元,2021年增长率0%，2022年325万元,2022年增长率1200%。党政人才2020年0.23万人,2021年0.24万人,2021年增长率4.35%，2022年0.21万人,2022年增长率-12.50%。企业经营管理人才2020年0.11万人,2021年0.14万人,2021年增长率27.27%，2022年0.15万人,2022年增长率7.14%。专业技术人才2020年0.34万人,2021年0.35万人,2021年增长率2.94%，2022年0.3528万人,2022增长率0.8%。高技能人才2020年0.13万人,2021年0.13万人,2021年增长率0.0%，2022年0.14万人,2022年增长率7.69%。农村实用人才2020年0.84万人,2021年0.87万人,2021增长率3.57%，2022年0.93万人,2022年增长率6.9%。社会工作人才2020年0.03万人,2021年0.04万人,2021年增长率33.33%，2022年0.04万人,2022年增长率0%',
        "金塔县":'人才总量2020年1.35万人,2021年1.43万人,2021年增长率5.93%，2022年1.4812万人,2022年增长率3.58%；各类人才占人口比例9.30%（2020）,9.87%（2021）,10.08%（2022）；人才发展专项资金2020年10万元,2021年10万元,2021年增长率0%，2022年10万元,2022年增长率0%。党政人才2020年0.11万人,2021年0.12万人,2021年增长率9.09%，2022年0.12万人,2022年增长率0%。企业经营管理人才2020年0.12万人,2021年0.13万人,2021年增长率8.33%，2022年0.136万人,2022年增长率4.62%。专业技术人才2020年0.24万人,2021年0.27万人,2021年增长率12.50%，2022年0.2912万人,2022增长率7.85%。高技能人才2020年0.06万人,2021年0.06万人,2021年增长率0.0%，2022年0.065万人,2022年增长率8.33%。农村实用人才2020年0.8万人,2021年0.83万人,2021增长率3.75%，2022年0.84万人,2022年增长率1.2%。社会工作人才2020年0.02万人,2021年0.02万人,2021年增长率0.00%，2022年0.29万人,2022年增长率45.00%',
        "肃北县":'人才总量2020年0.3075万人,2021年0.3204万人,2021年增长率4.20%，2022年0.3478万人,2022年增长率8.55%；各类人才占人口比例17.86%（2020）,18.57%（2021）,19.29%（2022）；人才发展专项资金2020年30万元,2021年40万元,2021年增长率33.33%，2022年50万元,2022年增长率25%。党政人才2020年0.12万人,2021年0.12万人,2021年增长率0.00%，2022年0.12万人,2022年增长率0.00%。企业经营管理人才2020年0.015万人,2021年0.02万人,2021年增长率33.33%，2022年0.02万人,2022年增长率0.00%。专业技术人才2020年0.1025万人,2021年0.1104万人,2021年增长率7.71%，2022年0.1278万人,2022增长率15.76%。高技能人才2020年0.04万人,2021年0.04万人,2021年增长率0.0%，2022年0万人,2022年增长率25.00%。农村实用人才2020年0.02万人,2021年0.02万人,2021增长率0%，2022年0.02万人,2022年增长率0.0%。社会工作人才2020年0.01万人,2021年0.01万人,2021年增长率0.00%，2022年0.01万人,2022年增长率0%',
        "肃州区":'人才总量2020年3.7441万人,2021年3.9556万人,2021年增长率5.65%，2022年4.5248万人,2022年增长率14.39%；各类人才占人口比例14.47%（2020）,14.89%（2021）,14.97%（2022）；人才发展专项资金2020年100万元,2021年112万元,2021年增长率12.00%，2022年143万元,2022年增长率27.68%。党政人才2020年0.2123万人,2021年0.2149万人,2021年增长率1.22%，2022年0.2153万人,2022年增长率0.19%。企业经营管理人才2020年0.2892万人,2021年0.3035万人,2021年增长率4.94%，2022年0.3276万人,2022年增长率7.94%。专业技术人才2020年0.5233万人,2021年0.534万人,2021年增长率2.04%，2022年0.5816万人,2022增长率8.91%。高技能人才2020年0.71万人,2021年0.7454万人,2021年增长率4.99%，2022年0.762万人,2022年增长率2.23%。农村实用人才2020年1.1784万人,2021年1.2925万人,2021增长率9.68%，2022年1.7615万人,2022年增长率36.29%。社会工作人才2020年0.8309万人,2021年0.8653万人,2021年增长率4.14%，2022年0.8768万人,2022年增长率1.33%',
      },*/
      markerData:{
        "敦煌市":'敦煌市人才总量0.8237万人；各类人才占人口比例5.58%；人才发展专项资金300万元。党政人才0.15万人。企业经营管理人才0.1623万人。专业技术人才0.3721万人。高技能人才0.0437万人。农村实用人才0.0655万人。社会工作人才0.0301万人',
        "瓜州县":'瓜州县人才总量1.6642万人；各类人才占人口比例12.53%；人才发展专项资金320万元。党政人才0.249万人。企业经营管理人才0.1416。专业技术人才0.3786万人。高技能人才0.0517万人。农村实用人才0.8263万人。社会工作人才0.0117万人',
        "阿克塞县":'阿克塞县人才总量0.2424万人；各类人才占人口比例24.13%；人才发展专项资金100万元。党政人才0.0992万人。企业经营管理人才0.0067万人。专业技术人才0.0443万人。高技能人才0.0332万人。农村实用人才0.0448万人。社会工作人才0.0142万人',
        "玉门市":'玉门市人才总量1.9295万人；各类人才占人口比例14.08%；人才发展专项资金300万元。党政人才0.2271万人。企业经营管理人才0.15万人。专业技术人才0.3554万人。高技能人才0.14万人。农村实用人才1.0032万人。社会工作人才0.0538万人',
        "金塔县":'金塔县人才总量1.518万人；各类人才占人口比例10.41%；人才发展专项资金10万元。党政人才0.123万人。企业经营管理人才0.14万人。专业技术人才0.295万人。高技能人才0.07万人。农村实用人才0.86万人。社会工作人才0.03万人',
        "肃北县":'肃北县人才总量0.365万人；各类人才占人口比例24.33%；人才发展专项资金490万元。党政人才0.13万人。企业经营管理人才0.022万人。专业技术人才0.13万人。高技能人才0.05万人。农村实用人才0.022万人。社会工作人才0.011万人',
        "肃州区":'肃州区人才总量4.5891万人；各类人才占人口比例15.16%；人才发展专项资金143万元。党政人才0.2153万人。企业经营管理人才0.3443万人。专业技术人才0.5907万人。高技能人才0.77万人。农村实用人才1.1784万人。社会工作人才0.8848万人',
      }
    }
  },
  methods:{
    initMap() {
      let myCharts = this.$echarts.init(document.getElementById('map'));
      this.$axios.get('/static/js/jqs_json.json').then((res) => {
        this.$echarts.registerMap('jqsMap', res.data);
        let option = {
          xAxis: {
            axisLine: {show: false},
            splitLine: {show: false},
            axisLabel: {show: false},
            axisTick: {show: false}
          },
          yAxis: {
            axisLine: {show: false},
            splitLine: {show: false},
            axisLabel: {show: false},
            axisTick: {show: false}
          },
          series:[
            {
              map: "jqsMap",
              center:[96.171627,40.560396],
              zoom:1.2,
              roam:true,
              type:'map',
              label: {
                show: true,
                fontSize: "14",
                color: "#fff"
              },
              itemStyle: {
                borderColor: "#058eb8",
                areaColor: "rgba(17,74,112,0.2)",
                borderWidth: 1,
                shadowBlur: 2,
                shadowColor: "#0f2652",
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: "14",
                  color: "#fff"
                },
                itemStyle: {
                  borderColor: "#058eb8",
                  areaColor: "rgba(17,74,112,0.2)",
                  borderWidth: 1,
                  shadowBlur: 2,
                  shadowColor: "#0f2652",
                }
              },
              select:{
                itemStyle: {
                  borderColor: "#058eb8",
                  areaColor: "rgba(17,74,112,0.2)",
                  borderWidth: 1,
                  shadowBlur: 2,
                  shadowColor: "#0f2652",
                },
                label: {
                  show: true,
                  fontSize: "14",
                  color: "#fff"
                }
              },
              markPoint:{
                symbolSize:30,
                label:{
                  show:false,
                },
                itemStyle:{
                  color:'#1EF0D7'
                },
                data:[],
              }
            }
          ]
        }
        myCharts.setOption(option)
        getMarkers().then(data=>{
          res.data.features.forEach(item=>{
            option.series[0].markPoint.data.push({
              coord:item.properties.cp,
              name:item.properties.name,
              value:data[item.id]
            })
          })
          myCharts.setOption(option)
          myCharts.on('click',(e)=>{
            if(e.componentType==='markPoint'){
              this.content=this.markerData[e.data.name];
              this.total=e.data.value;
              this.tooltip.show=true;
              this.$nextTick(()=>{
                let node=document.getElementById('tooltip');
                let x=node.offsetWidth/2;
                let y=node.offsetHeight;
                this.tooltip.x=e.event.offsetX-x;
                this.tooltip.y=e.event.offsetY-y-20;
              })
            }else{
              this.tooltip.show=false;
            }
          })
        })
      })
    },
  },
  mounted() {
    this.initMap()
  }
}
</script>
<style lang="scss" scoped>
.map-block{
  position:relative;
  #map{
    width: 100%;
    height: 100%;
  }
  .tooltip{
    position: absolute;
    top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    width: 400px;
    padding: 15px;
    background: #fff;
    border-radius: 8px;
  }
}

</style>
